<template>
	<!-- 投诉管理 -->
	<view class="user-order">
		<!-- header -->
		<view class="od-line2" @click="onNav2">
			<view :class="['item', swiperCurrent1 == item.id ? 'line2-active': ''] " :id="item.id" v-for="(item,index) in navList"
			 :key="index">
				{{item.name}}
			</view>
		</view>

		<swiper :duration="300" @change="changeSwiper" class="ud-swiper" :current="swiperCurrent1">
			<!-- 第一块轮播  全部 -->
			<swiper-item>
				<!-- 可滚动区域 -->
				<scroll-view :scroll-y="true" class="scrollStyle">
					<view class="content-box" v-for="(item,index) in ComplaintInfo" :key="index">
						<view class="box-item">
							<view class="item1">
								<image class="title-name" :src="item.or_avatar" mode=""></image>
								<view>
									<view class="item1-title">
										<view>
											<image :src="item.shavatar"></image>
											<text>{{item.nickname}}</text>
										</view>
										<text class="iconfont">&#xe600;</text>
									</view>
									<view class="item1-name">
										<text>{{item.pro_name}}</text>
										<text>{{item.or_price}}</text>
									</view>
									<view class="item-order">
										<text>订单号：{{item.orid}}</text>
										<text>x{{item.or_pronum}}</text>
									</view>
								</view>
							</view>
							<view class="item2">
								<view class="itme2-top">
									<text>投诉说明:</text>
									<text>{{item.user_content}}</text>
								</view>

								<!-- 1 -->
								<block v-if="item.status == 1">
									<view class="item2-btn">
										<view class="picker">
											<view>已处理</view>
										</view>
										<input type="text" disabled="true" :value="item.message" placeholder="" placeholder-style="color: #999" />
									</view>
								</block>
								<!-- 4 -->
								<block v-else-if="item.status == 4">
									<view class="item2-btn">
										<view class="picker">
											<view>平台已回复</view>
										</view>
										<input type="text" disabled="true" :value="item.message" placeholder="" placeholder-style="color: #999" />
									</view>
									<view class="four-img" v-for="(val,index) in item.ComplaintImage" :key="index">
										<image :src="val" mode="aspectFill"></image>
									
									</view>
								</block>
								<block v-else-if="item.status == 5">
									<view class="item2-btn">
										<view class="picker">
											<view>平台介入···</view>
										</view>
										<input type="text" disabled="true" :value="item.message" placeholder="" placeholder-style="color: #999" />
									</view>
									
										<view class="four-img">
											<block v-for="(val,index) in item.ComplaintImage" :key="index">
											<image :src="val" mode="aspectFill"></image>
											</block>
										</view>
									
									
								</block>
								<!-- 2,3 -->
								<block v-else>
									<view class="item2-btn">
										<picker class="picker" mode="selector" :value="(item.status - 2)" :range="checkList" @change="onChecked($event, item)">
											<view>{{checkList[(item.status - 2)]}} <text class="iconfont">&#xe627;</text></view>
										</picker>
										<input type="text" v-model="item.message" placeholder="请添加描述" placeholder-style="color: #999" />
									</view>
									<!-- 2未处理，3平台申诉 -->
									<view class="item2-img" v-show="(item.status - 2)"> 
									<view class="img" @click="chooseImg(item)" >
										<text class="iconfont icon">&#xe641;</text>
										<!-- <text>{{ ('imgUrls' in item) ? item.imgUrls.length : 0 }}/3</text> -->
									</view>
										<view class="img" v-for="(val,index) in item.imgList" :key="index">
											<image :src="val" mode="aspectFill" @click="previewImg(item,index)"></image>
											<view class="remove" @click="removeImg(item,index)">
												<text class="iconfont remove-img">&#xe628;</text>
											</view>
										</view>

									</view>

									<view class="item2-footer">
										<button type="primary" @click="onConfirm(item)">提交申诉</button>
									</view>
								</block>

							</view>

						</view>

					</view>
				</scroll-view>
			</swiper-item>

			<!-- 第二块轮播 已付款 -->
			<swiper-item>
				<scroll-view :scroll-y="true" class="scrollStyle">
					<view class="content-box" v-for="(item,index) in ComplaintProcessed" :key="index">
							<view class="box-item">
								<view class="item1">
									<image class="title-name" :src="item.or_avatar" mode=""></image>
									<view>
										<view class="item1-title">
											<view>
												<image :src="item.shavatar"></image>
												<text>{{item.nickname}}</text>
											</view>
											<text class="iconfont">&#xe600;</text>
										</view>
										<view class="item1-name">
											<text>{{item.pro_name}}</text>
											<text>{{item.or_price}}</text>
										</view>
										<view class="item-order">
											<text>订单号：{{item.orid}}</text>
											<text>x{{item.or_pronum}}</text>
										</view>
									</view>
								</view>
								<view class="item2">
									<view class="itme2-top">
										<text>投诉说明:</text>
										<text>{{item.user_content}}</text>
									</view>
					
									<!-- 1 -->
									<block >
										<view class="item2-btn">
											<view class="picker">
												<view>已处理</view>
											</view>
											<input type="text" disabled="true" :value="item.message" placeholder="" placeholder-style="color: #999" />
										</view>
									</block>
								</view>
					
							</view>
					
						</view>
				</scroll-view>
			</swiper-item>

			<!-- 第三块轮播 未付款 -->
			<swiper-item>
				<scroll-view :scroll-y="true" class="scrollStyle">
					<view class="content-box" v-for="(item,index) in ComplaintUntreated" :key="index">
							<view class="box-item">
								<view class="item1">
									<image class="title-name" :src="item.or_avatar" mode=""></image>
									<view>
										<view class="item1-title">
											<view>
												<image :src="item.shavatar"></image>
												<text>{{item.nickname}}</text>
											</view>
											<text class="iconfont">&#xe600;</text>
										</view>
										<view class="item1-name">
											<text>{{item.pro_name}}</text>
											<text>{{item.or_price}}</text>
										</view>
										<view class="item-order">
											<text>订单号：{{item.orid}}</text>
											<text>x{{item.or_pronum}}</text>
										</view>
									</view>
								</view>
								<view class="item2">
									<view class="itme2-top">
										<text>投诉说明:</text>
										<text>{{item.user_content}}</text>
									</view>
					
									<!-- 1 -->
									<block v-if="item.status == 1">
										<view class="item2-btn">
											<view class="picker">
												<view>已处理</view>
											</view>
											<input type="text" disabled="true" :value="item.message" placeholder="" placeholder-style="color: #999" />
										</view>
									</block>
									<!-- 4 -->
									<block v-else-if="item.status == 4">
										<view class="item2-btn">
											<view class="picker">
												<view>平台已回复</view>
											</view>
											<input type="text" disabled="true" :value="item.message" placeholder="" placeholder-style="color: #999" />
										</view>
										<view class="four-img" v-for="(val,index) in item.ComplaintImage" :key="index">
											<image :src="val" mode="aspectFill"></image>
										
										</view>
									</block>
					
									<!-- 2,3 -->
									<block v-else>
										<view class="item2-btn">
											<picker class="picker" mode="selector" :value="(item.status - 2)" :range="checkList" @change="onChecked($event, item)">
												<view>{{checkList[(item.status - 2)]}} <text class="iconfont">&#xe627;</text></view>
											</picker>
											<input type="text" v-model="item.message" placeholder="请添加描述" placeholder-style="color: #999" />
										</view>
										<!-- 2未处理，3平台申诉 -->
										<view class="item2-img" v-show="(item.status - 2)"> 
										<view class="img" @click="chooseImg(item)" >
											<text class="iconfont icon">&#xe641;</text>
											<!-- <text>{{ ('imgUrls' in item ? item.imgUrls.length : 0) }}/3</text> -->
										</view>
											<view class="img" v-for="(val,index) in item.imgList" :key="index">
												<image :src="val" mode="aspectFill" @click="previewImg(item,index)"></image>
												<view class="remove" @click="removeImg(item,index)">
													<text class="iconfont remove-img">&#xe628;</text>
												</view>
											</view>
					
										</view>
					
										<view class="item2-footer">
											<button type="primary" @click="onConfirm(item)">提交申诉</button>
										</view>
									</block>
					
								</view>
					
							</view>
					
						</view>
					
				</scroll-view>
			</swiper-item>

		</swiper>

	</view>
</template>

<script>
	export default {


		data() {
			return {
				dataList: [], // 所有数据
				ComplaintInfo: [], // 全部投诉
				ComplaintProcessed: [], // 已处理
				ComplaintUntreated: [], // 未处理

				swiperCurrent1: 0,
				checkList: ['未处理', '平台申诉'], // 选项框的操作
				value: 0, // 第几个
				imgUrls: [], // img
				imgList: [], // 图片列表
				navList: [{ // 导航栏列表
					id: '0',
					name: '全部投诉'
				}, {
					id: '1',
					name: '已处理'
				}, {
					id: '2',
					name: '未处理'
				}],
				
			}
		},
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		methods: {
			async onConfirm(data) {
				if(data.status == 2){ // 未处理的
					let aa = {
						order_id: data.orid,
						user_content: data.message,
						comid: data.comid, 
					}
					let a = await this.$http.ComplaintReply(aa);
					console.log(a);
					if(a.code == 200){
						uni.showToast({
							title: a.message,
							icon: 'none'
						})
						this.getData();
						return
					}
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					return
				}
				
				let bb = {
					order_id: data.orid,
					user_content: data.message,//
					comid: data.comid, //
					image: data.imgUrls
				}
				let b = await this.$http.platformAppeal(bb);
				if(b.code == 200){
					uni.showToast({
						title: b.message,
						icon: 'none'	
					})
					this.getData();
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'	
				})
				
			},
			async getData() { // 获取数据
				let a = await this.$http.complaint();
				let b = a.data;
				this.ComplaintInfo = b.ComplaintInfo;
				this.ComplaintProcessed = b.ComplaintProcessed;
				this.ComplaintUntreated = b.ComplaintUntreated;
				uni.stopPullDownRefresh()
			},

			chooseImg(data) { // 自己写的选择图片
				var _self = this;
				if(!('imgList' in data)) { // true
					this.$set(data, 'imgList', [])
				}
				if (data.imgList.length >= 3) {
					uni.showToast({
						title: '最多只能添加3张',
						icon: 'none'
					})
					return
				}
				this.$set(data, 'imgUrls', [])
					uni.chooseImage({
						count: 3 - data.imgList.length, //默认9
						sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							let a = res.tempFilePaths;
							data.imgList = data.imgList.concat(a)
							data.imgList.forEach((item, index) => { // 循环上传
								uni.showLoading({
									title: `第${index}张图片正在上传`
								})
								uni.uploadFile({
									url: _self.$common.baseUrl.setUploadImg,
									filePath: item,
									name: 'file',
									success: (res) => {
										if (res.statusCode !== 200) {
											uni.showToast({
												title: '图片上传失败，请重试',
												icon: 'none'
											})
											uni.hideLoading()
											data.imgUrls = []
											return
										}
										res = JSON.parse(res.data)
										if (res.code == 200) {
											data.imgUrls.push(res.data.file);
											uni.hideLoading();
										}
									}
								});
							})
						}
					});
			},
			previewImg(data,index) { //图片预览
				uni.previewImage({
					urls: data.imgList,
					current: index,
					indicator: 'number'
				});
			},
			removeImg(data,index) { // 移除图片
				data.imgList.splice(index, 1);
				data.imgUrls.splice(index, 1)
			},
			onChecked(e,data) { // 选项框的操作
				// this.value = e.target.value;
				let a = e.target.value + 2;
				this.$set(data, 'status', a)
				console.log(a);
				console.log(data);
			},
			onNav2(e) {  // 1
				this.swiperCurrent1 = e.target.id
			},
			changeSwiper(e) { //2
				this.swiperCurrent1 = e.target.current
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});

			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/refund.scss';

	/* #ifdef MP-WEIXIN */
	.ud-swiper {
		height: 1140upx;
	}

	/* #endif */
</style>
